/*
 * @Author: zs.duan
 * @Date: 2023-03-18 13:24:22
 * @LastEditors: zs.duan
 * @LastEditTime: 2023-03-18 17:33:03
 * @FilePath: \blog_show\src\components\banner-top\banner-top.js
 */
import React from "react";
import { _ } from "../../common/request";
import "./style.css";
import defaultImgUrl from "../../static/images/inde-top-banner.jpeg";
import { Image } from 'antd';
class BannerTop extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            imgUrl : defaultImgUrl,
            backColor : {
                backgroundColor: "rgba(255,255,255,0)"
            },
        }
    }

    componentDidMount() {
        window.addEventListener('scroll', this.scrollEvent);
        this.getBannerTopImg();
    }

    // 获取首页顶部图片
    getBannerTopImg = () => {
        _.getTopImg().then((res) => {
            this.setState({
                imgUrl : res.data.image_url ? res.data.image_url : defaultImgUrl
            })
        })
    }

    /**监听滚动条高度*/
    scrollEvent = () => {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        // 获取屏幕高度
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        this.setState({
            backColor : {
                backgroundColor: `rgba(255,255,255,${scrollTop/clientHeight})`
            }
        })
    } 

    render(){
        return (
            <div className="banner-top-box">
                <div className="banner-top">
                    <Image width="100%" height="100%" src={this.state.imgUrl} alt="banner-top" fallback={defaultImgUrl}></Image>
                    {/* <img src={this.state.imgUrl} alt="banner-top"/> */}
                    <div className="mouse-box">
                        <p>下滑更多精彩</p>
                        <div className="mouse"></div>
                        <i></i>
                    </div>
                </div>
                <div className="banner-top-empty" style={this.state.backColor}></div>
            </div>
        )
    }
}

export default BannerTop;